

<template>
  <h2>{{this.$route.query.experiment_name}}&nbsp;实验下其他文件</h2>
  <a-divider
      type="horizontal"
      :style="{ borderColor: '#19a7ff', borderWidth: '2px' }"
  />
  <a-table :columns="fileTableColumns" :data-source="fileData" :pagination="false" :scroll="{y:'70vh'}">
    <template #bodyCell="{column, record}">
      <template v-if="column.key === 'action' ">
            <span>
              <a @click="handleDownloadFile(record)">下载</a>
              <a-divider type="vertical" />
            </span>
      </template>
    </template>
  </a-table>
</template>


<script>
import axiosInstance from "@/axios/axios.js";

export default {
  name: "ImageFilesTable",
  data(){
    return{
      fileData:[],
      fileTableColumns:[
        {
          title:"文件名",
          dataIndex:"name",
          key:"name"
        },
        {
          title:"修改时间",
          dataIndex:"modifiedTime",
          key:"modifiedTime"
        },
        {
          title:"操作",
          key:"action",
          scopedSlots: { customRender: 'action' }
        }
      ],
    }
  },

  created() {
    this.getNonDirectoryFilesInfo();
  },

  methods:{
    //获取批次目录下非目录文件信息
    getNonDirectoryFilesInfo(){
      const relativePath=this.$cookies.get("username")+"/"+this.$route.query.experiment_set_name+"/"
          +this.$route.query.experiment_batch_name+"/"
          +this.$route.query.experiment_name;
      console.log("请求url",relativePath);
      const encodeRelativePath=encodeURIComponent(relativePath);
      axiosInstance({
        method: "GET",
        url: "/common/getFilesInfo?relativePath="+encodeRelativePath,
        headers: {
          Authorization: `Bearer ${this.$cookies.get("jwt")}` // 设置请求头，携带 JWT
        },
      })
      .then((response) => {
        this.fileData=response.data.data;
        console.log(response.data.data)
      })
      .catch((err) => {
        console.log(err);
      });
    },

    //下载文件按钮
    handleDownloadFile(record){
      console.log("要下载文件record：",record)
      axiosInstance({
        method: "GET",
        url: record.url,
        headers: {
          Authorization: `Bearer ${this.$cookies.get("jwt")}` // 设置请求头，携带 JWT
        },
        responseType:"blob"
      })
          .then((response) => {
            const fileName=record.name;
            // 创建Blob对象URL
            const blobUrl = window.URL.createObjectURL(new Blob([response.data]));
            // 创建超链接元素并设置下载链接
            const link = document.createElement('a');
            link.href = blobUrl;
            link.setAttribute('download', fileName);
            // 追加链接到DOM，并触发点击下载
            document.body.appendChild(link);
            link.click();
            // 移除链接元素
            link.remove();
          })
          .catch((err) => {
            console.log(err);
          });
    },

  }
}


</script>

<style scoped>

</style>